<template>
	<view class="doctor-page">
		<view class="tip fc">
			<view class="tip-line1">
				<text class="line1-item"> 预约挂号</text>
				<u-tag text="线下号源" type="success" plain plainFill></u-tag>
			</view>
			<view class="line2">
				<view>1. 请您在预约时间抵达科室,并在自助机进行预约签到。</view>
				<view>2. 预约报道在就诊当日提前<text class="last-time">15分钟</text> 排队就诊,迟到患者不享受预约优先就诊规则。</view>
			</view>
		</view>
		<view class="patient fr">
			<view class="patient-name">就诊人姓名</view>
			<view class="change-patient">切换就诊人 > </view>
		</view>
		<view class="choose">
			<view class="chooseDate fr item" @click="showdate=true">
				<text>选择日期 {{choosedate}}</text>
				<text> > </text>
			</view>
			<view>
				<view class="chooseDate fr">
					<text>选择时间 {{choosetime}}</text>
					<text> > </text>
				</view>
				<view class="time-wrap fc">
					<view>上午:</view>
					<view class="shang item fr">
						<view class="shangxia-item" v-for="v,i in timeshang">
							<view class="mine" :style="{color:v.check? 'red' :''}" @click="ontime(v,0)">{{v.time}}
							</view>
						</view>
					</view>
					<view>下午:</view>
					<view class="xia item fr">
						<view class="shangxia-item" v-for="v,i in timexia">
							<view class="mine" :style="{color:v.check? 'red' :''}" @click="ontime(v,1)">{{v.time}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="result">
			<view class="finatime">{{choosedate}} {{choosetime}}</view>
			<view class="btn" @click="onsure">
				<van-button type="primary">确认预约</van-button>
			</view>
		</view>
		<!-- 日期选择器 -->
		<u-calendar :maxDate="maxDate" :show="showdate" :defaultDate="defaultDateMultiple" @close="close" @confirm="confirm">
		</u-calendar>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onHide,
		onInit,
		onLaunch,
		onReady,
		onResize,
		onShow,
		onUnload
	} from "@dcloudio/uni-app"
	import {ref} from 'vue'
	import {showNotify} from 'vant'
	import {Dialog} from 'vant';
	import {showConfirmDialog} from 'vant';
	import {yuYue} from '../../pinia/yuyue'
	const yuyue = yuYue()
	
	let d = new Date();
	let year = d.getFullYear();
	let month = d.getMonth() + 1;
	month = month < 10 ? `0${month}` : month;
	let date = d.getDate();
	// 回显日期
	let choosedate = `${year}-${month}-${date}`
	// 默认选中日期
	let defaultDateMultiple = [`${choosedate}`]
	let showdate = ref(false);
	// 通过maxDate来定义可选择的时间范围
	let maxDate = `${year}-${month}-${date + 7}`;
	let choosetime = ref('')
	
	let timeshang = ref([{
			time: '08:00',
			check: false
		},
		{
			time: "08:30",
			check: false
		},
		{
			time: "09:00",
			check: false
		},
		{
			time: "09:30",
			check: false
		},
		{
			time: "10:00",
			check: false
		},
		{
			time: "10:30",
			check: false
		},
		{
			time: "11:00",
			check: false
		}
	])
	// 	// 下午号源
	let timexia = ref([{
			time: '14:00',
			check: false
		},
		{
			time: '14:30',
			check: false
		},
		{
			time: "15:00",
			check: false
		},
		{
			time: "15:30",
			check: false
		},
		{
			time: "16:00",
			check: false
		},
		{
			time: "16:30",
			check: false
		},
		{
			time: "17:00",
			check: false
		}
	])
	let maskmsg = choosedate + '' + choosetime

	// 点击日期弹窗的确认, e--> [{0:'2023-08-30'}]
	const confirm = (e) => {
		choosedate = e[0]
		defaultDateMultiple = [choosedate]
		close()
	};
	// 点击日期弹窗的小叉叉
	const close = (() => {
		showdate.value = false
	})



	// 选择时间点
	function ontime(v, n) {
		if (!n) {
			timeshang.value.forEach(item => {
				item.check = false
				if (item.time == v.time) {
					item.check = true
				}
			})
			timexia.value.forEach(item => item.check = false)
		} else {
			timeshang.value.forEach(item => item.check = false)
			timexia.value.forEach(item => {
				item.check = false
				if (item.time == v.time) {
					item.check = true
				}
			})
		}
		choosetime.value = v.time
	}

	// 点击确认预约
	function onsure() {
		if (!choosetime.value) {
			return showNotify({type: 'warning',message: '请选择时间'})
		}
		showConfirmDialog(
			{
				title: '预约信息',
				message: `您预约了XX 科室 ${choosedate} ${choosetime.value}`,
			})
			.then(() => {
				yuyue.updateTime(`${choosedate} ${choosetime.value}`)
				// on confirm
				showNotify({type: 'success',message: '预约成功'});
				console.log(yuyue.time,yuyue.doctor,yuyue.chooseDepartment)
				setTimeout(() => {
					uni.reLaunch({url: "/pages/home-page/home-page"})
				}, 3000)
			})
			.catch(() => {
				// on cancel
			});
	}
	// 获取选择的医生id
	onLoad((params) => {
		console.log(params)
	})
	
</script>

<style lang="scss" scoped>
	.fc {
		display: flex;
		flex-direction: column;
	}

	.fr {
		display: flex;
		align-items: center;
	}

	.doctor-page {
		width: 100vw;
		height: calc(100vh - 44px);
		overflow: scroll;
		padding: 10px;
		box-sizing: border-box;
	}

	.tip {
		width: 100%;
		height: 150px;
		padding: 10px;
		border-radius: 10px;
		box-sizing: border-box;
		border: 1px solid #999;
		justify-content: space-around;
	}

	.line1-item,
	.patient-name {
		font-weight: bold;
		margin-right: 10px;
	}

	.last-time {
		color: darkorange;
	}

	.line2 {
		color: #999;
	}

	.patient {
		margin: 20px 0;
		padding: 10px;
		border-radius: 10px;
		box-sizing: border-box;
		justify-content: space-between;
		background-color: #e8f2fe;
	}

	.change-patient {
		color: #7ea7ff;
	}

	.chooseDate {
		background-color: #e8f2fe;
		padding: 10px;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.title {
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}

	.item {
		border-bottom: 1px solid #ddd;
	}

	.time-wrap>.item {
		width: 100%;
		height: 80px;
		flex-wrap: wrap;
	}

	.shangxia-item {
		margin: 5px;
	}

	.mine {
		padding: 5px 10px;
		font-size: 14px;
		border-radius: 5px;
		border: 1px solid #7ea7ff;
	}

	.result {
		position: fixed;
		bottom: 10px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn {
		width: 100px
	}
</style>